﻿
@{
    ViewData["Title"] = "Animation1";
}

<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Animation</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Animation</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <!-- [ animation ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Attention Seekers</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Bounce</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounce">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Flash</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="flash">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Pulse</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="pulse">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>RubberBand</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="rubberBand">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Shake</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="shake">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Swing</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="swing">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Tada</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="tada">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Wobble</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="wobble">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Jello</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="jello">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Bouncing Entrances</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceIn</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceIn">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceInDown</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceInDown">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceInLeft</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceInLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceInRight</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceInRight">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceInUp</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceInUp">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Bouncing Exits</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceOut</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceOut">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceOutDown</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceOutDown">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceOutLeft</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceOutLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceOutRight</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceOutRight">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>BounceOutUp</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="bounceOutUp">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Fading Entrances</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeIn</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeIn">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeInDown</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeInDown">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeInDownBig</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeInDownBig">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeInLeft</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeInLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeInLeftBig</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeInLeftBig">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeInRight</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeInRight">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeInRightBig</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeInRightBig">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeInUp</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeInUp">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeInUpBig</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeInUpBig">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Fading Exits</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOut</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOut">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOutDown</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOutDown">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOutDownBig</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOutDownBig">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOutLeft</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOutLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOutLeftBig</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOutLeftBig">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOutRight</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOutRight">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOutRightBig</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOutRightBig">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOutUp</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOutUp">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FadeOutUpBig</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="fadeOutUpBig">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Flippers</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Flip</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="flip">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FlipInX</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="flipInX">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FlipInY</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="flipInY">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FlipOutX</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="flipOutX">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>FlipOutY</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="flipOutY">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Lightspeed</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>LightSpeedIn</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="lightSpeedIn">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>LightSpeedOut</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="lightSpeedOut">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Rotating Exits</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>RotateIn</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="rotateIn">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>RotateInDownLeft</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="rotateInDownLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>RotateInDownRight</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="rotateInDownRight">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>RotateInUpLeft</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="rotateInUpLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>RotateInUpRight</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="rotateInUpRight">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Sliding Entrances</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>SlideInUp</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="slideInUp">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>SlideInDown</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="slideInDown">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>SlideInLeft</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="slideInLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>SlideInRight</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="slideInRight">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Sliding Exits</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>SlideOutUp</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="slideOutUp">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>SlideOutDown</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="slideOutDown">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>SlideOutLeft</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="slideOutLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>SlideOutRight</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="slideOutRight">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Zoom Entrances</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomIn</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomIn">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomInDown</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomInDown">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomInLeft</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomInLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomInRight</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomInRight">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomInUp</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomInUp">
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Zoom Exits</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomOut</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomOut">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomOutDown</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomOutDown">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomOutLeft</h6>
                                                <img src="~/assets/images/product/prod-5.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomOutLeft">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomOutRight</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomOutRight">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>ZoomOutUp</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="zoomOutUp">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Specials</h5>
                                        <div class="card-header-right">
                                            <div class="btn-group card-option">
                                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="feather icon-more-horizontal"></i>
                                                </button>
                                                <ul class="list-unstyled card-option dropdown-menu dropdown-menu-right">
                                                    <li class="dropdown-item full-card"><a href="#!"><span><i class="feather icon-maximize"></i> maximize</span><span style="display:none"><i class="feather icon-minimize"></i> Restore</span></a></li>
                                                    <li class="dropdown-item minimize-card"><a href="#!"><span><i class="feather icon-minus"></i> collapse</span><span style="display:none"><i class="feather icon-plus"></i> expand</span></a></li>
                                                    <li class="dropdown-item reload-card"><a href="#!"><i class="feather icon-refresh-cw"></i> reload</a></li>
                                                    <li class="dropdown-item close-card"><a href="#!"><i class="feather icon-trash"></i> remove</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-block text-center">
                                        <div class="row">
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>Hinge</h6>
                                                <img src="~/assets/images/product/prod-1.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="hinge">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>JackInTheBox</h6>
                                                <img src="~/assets/images/product/prod-2.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="jackInTheBox">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>RollIn</h6>
                                                <img src="~/assets/images/product/prod-3.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="rollIn">
                                            </div>
                                            <div class="col-lg-3 col-md-6 col-sm-6">
                                                <h6>RollOut</h6>
                                                <img src="~/assets/images/product/prod-4.jpg" alt="img" class="img-fluid animation-toggle animated" data-animate="rollOut">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ animation ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->

@section Styles{
    <!-- bootstrap-tagsinput-latest css -->
    <link rel="stylesheet" href="~/assets/plugins/bootstrap-tagsinput-latest/css/bootstrap-tagsinput.css">
}

@section Scripts{
    <script>
        $(document).ready(function() {
            $('.animation-toggle').hover(function() {
                var anim = $(this).attr('data-animate');
                $(this).addClass('animated');
                $(this).addClass(anim);
                setTimeout(function() {
                    $('.animation-toggle').removeClass(anim);
                }, 3000);
            });
        });
    </script>
}

